<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>测试Axios发出异步请求</h1>
<input type="button" value="发请求" onclick="fn()">
<h1>测试post请求</h1>
<input type="button" value="post请求" onclick="postfn()">


<!--引入vue和axios-->
<!--<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script>
    function fn() {
       /* //发出异步get请求
        axios.get("/helloAxios").then(function (response) {
            //请求成功后执行的代码 response代表相应对象
            alert(response.data); //response.data代表相应的数据
        }).catch(function (err) {
            //请求失败时执行的代码 err代表错误对象
            alert(err);
        })*/

        //如果请求出错时不需要做任何事，可以省略掉后面的catch 不写catch如果出错需要在控制台中查看错误
        axios.get("/helloAxios?info=abc").then(function (response) {
            //请求成功后执行的代码 response代表相应对象
            alert(response.data); //response.data代表相应的数据
        });
    }
    
    function postfn() {
        //post请求如果需要传参，通过FormData对象传参
        let data = new FormData();
        data.append("info","ly");
        axios.post("/helloAxios",data).then(function (response) {
            alert(response.data)
        })
    }
</script>
</body>
</html>